<template>
  <div class="head">
    <div class="search">
      <van-search
        v-model="value"
        shape="round"
        placeholder="搜索展会、帖子、用户、话题"
        class="search-1"
        @change="addlist"
      />
      <div class="xiao" @click="goBack">取消</div>
    </div>
    <div class="past">
      <em><van-icon name="clock" color="#F04A3A " size="18" class="lisi" /></em>
      <span>历史记录</span>
      <strong @click="clear">清除</strong>
    </div>
    <ul class="cont">
      <li v-for="item in todolist" :key="item.id">{{ item.text }}</li>
    </ul>
  </div>
</template>

<script>
import { ref } from "vue";
import { Search, Icon } from "vant";
import { useRouter } from "vue-router";
export default {
  components: {
    VanSearch: Search,
    VanIcon: Icon,
  },
  setup() {
    const router = useRouter();
    const value = ref("");
    const todolist = ref([
      {
        id: 1,
        text: "游戏",
      },
      {
        id: 2,
        text: "动漫",
      },
      {
        id: 3,
        text: "暑期拍片打卡",
      },
      {
        id: 4,
        text: "试装打卡游戏",
      },
      {
        id: 5,
        text: "Lolita",
      },
    ]);
    const goBack = () => {
      router.go(-1);
    };
    const addlist = () => {
      if (value.value) {
        todolist.value.push({
          id: new Date().getTime(),
          text: value.value,
        });
        value.value = "";
      }
    };
    const clear = () => {
      todolist.value.length = 0;
    };
    return { value, goBack, todolist, addlist, clear };
  },
};
</script>

<style lang="less" scoped>
.head {
  height: 667px;
  background-color: #fff;
}
.search {
  background-color: #fff;
  display: flex;
  .search-1 {
    width: 308px;
  }
  .xiao {
    width: 50px;
    height: 27px;
    font-size: 14px;
    line-height: 27px;
    margin-top: 12px;
    margin-left: 15px;
  }
}
.past {
  padding: 10px 15px;
  line-height: 20px;
  > em {
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
  }
  > span {
    font-size: 14px;
    font-family: PingFang;
    font-weight: bold;
    color: #333333;
  }
  > strong {
    float: right;
    font-size: 12px;
    font-family: PingFang;
    font-weight: 500;
    color: #999999;
  }
}
.cont {
  display: flex;
  flex-wrap: wrap;
  padding: 0px 15px;
  li {
    padding: 0 12px;
    height: 28px;
    background: #f5f5f5;
    border-radius: 14px;
    font-size: 12px;
    font-family: PingFang;
    font-weight: 500;
    color: #333333;
    line-height: 28px;
    margin-top: 10px;
    margin-right: 10px;
  }
}
</style>
